<template>
    <div>
        <Header />
        <div class="bookInfo" v-loading="loading">
            <div class="left-box">
                <img :src="bookInfo.cover" alt="" height="260">
            </div>
            <div class="right-box">
                <h2>{{ bookInfo.name }}</h2>
                <div style="border-bottom: 1px solid #f5f5f5;">简介：{{ bookInfo.description }}</div>
                <div>
                    <span>作者：{{ bookInfo.author }}</span>
                    <span style="margin:20px">出版社：{{ bookInfo.publisher }}</span>
                </div>
                <div class="price">热卖促销 ￥<span>{{ bookInfo.price }}</span> 起</div>
                <div>
                    数量：
                    <el-input-number step-strictly size="medium" style="width:140px" v-model="number" @change="handleChange" :min="1" :max="bookInfo.storeNum">
                    </el-input-number>
                    库存：{{ bookInfo.storeNum }}
                </div>
                <div>配送至：
                    <el-select v-model="addressVal" placeholder="请选择" style="width:300px">
                        <el-option v-for="item in addressList" :key="item.id" :label="item.urbanAddr + item.detailAddr" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="btn">
                    <el-button-group>
                        <!-- <el-button size="medium" class="buyBtn" @click="handleBuyNew">立即购买</el-button> -->
                        <el-button size="medium" class="addBtn" @click="addShopCar">加入购物车</el-button>
                    </el-button-group>
                    <div class="collect">
                        <div v-if="bookInfo.collect" @click="handleDelCollect(bookInfo.id)">
                            <i class="el-icon-star-on"></i> 取消收藏
                        </div>
                        <div v-else @click="handleCollect(bookInfo.id)" style="cursor: pointer;">
                            <i class="el-icon-star-off"></i> 收藏
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer />
    </div>

</template>

<script>
import Header from "@/views/Components/Header/index.vue";
import Footer from "@/views/Components/Footer/index.vue";

import { get, postJSON, delJSON, put } from "@/utils/request";
export default {
    components: {
        Header,
        Footer,
    },
    data() {
        return {
            bookId: "",
            bookInfo: {},
            number: "",
            loading: false,
            addressList: [],
            addressVal: "",
        };
    },
    created() {
        this.bookId = this.$route.query.id;
        this.getBookInfo();
        this.getAddressList();
    },
    methods: {
        // 获取图书详情
        getBookInfo() {
            this.bookInfo = [];
            this.loading = true;
            get(`/book/${this.bookId}`).then((res) => {
                if (res && res.data) {
                    this.bookInfo = res.data;
                    this.loading = false;
                }
            });
        },
        // 获取用户的所有收货地址
        getAddressList() {
            this.addressList = [];
            this.addressVal = "";
            get("/address").then((res) => {
                if (res && res.data) {
                    console.log("收货地址", res.data);
                    this.addressList = res.data;
                    this.addressVal = res.data.find((item) => {
                        return item.defaultValue;
                    }).id;
                }
            });
        },
        handleChange() {},
        // 点击收藏
        handleCollect(id) {
            postJSON(`/collect/${id}`)
                .then((res) => {
                    if (res && res.message == "ok") {
                        this.$message({
                            message: "收藏成功！",
                            type: "success",
                        });
                        this.getBookInfo();
                    }
                })
                .catch((err) => {
                    this.$message.error("收藏失败！");
                });
        },

        // // 取消收藏
        // handleDelCollect(id) {
        //     let ids = [];
        //     ids[0] = id;
        //     delJSON("/collect/", ids).then((res) => {
        //         console.log(res);
        //         if (res && res.message == "ok") {
        //             this.$message({
        //                 message: "已取消收藏！",
        //                 type: "success",
        //             });
        //             this.getBookInfo();
        //         }
        //     });
        // },

        // 点击立即购买
        handleBuyNew() {},
        // 点击加入购物车
        addShopCar() {
            put(`/shopCar/${this.bookId}`).then((res) => {
                if (res && res.message == "ok") {
                    this.$message({
                        message: "添加购物车成功！",
                        type: "success",
                    });
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.bookInfo {
    width: 70%;
    margin: 0 auto;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    .left-box {
        width: 300px;
        height: 300px;
        text-align: center;
        padding-top: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
    }
    .right-box {
        width: 60%;
        padding: 10px;
        color: #333;
        h2 {
            line-height: 46px;
        }
        & > div {
            height: 46px;
            vertical-align: middle;
            line-height: 46px;
        }
        .price {
            color: red;
            span {
                font-size: 22px;
            }
        }
        .btn {
            margin-top: 20px;
            // .el-button-group {
            //     line-height: 46px;
            // }
            .buyBtn {
                border-radius: 20px 0 0 20px;
                background: linear-gradient(
                    90deg,
                    rgb(255, 119, 0),
                    rgb(255, 73, 0)
                );
                border: none;
            }
            .addBtn {
                border-radius: 20px;
                background: linear-gradient(
                    90deg,
                    rgb(255, 203, 0),
                    rgb(255, 148, 2)
                );
                border: none;
            }
            .collect {
                display: inline-block;
                line-height: 34px;
                margin-left: 20px;
            }
        }
    }
}
</style>
